<template>
    <div id="divId" :style="{height: '450px',width: tableWidth}">
      <el-form>
        <el-form-item label="年份选择">
          <el-select v-model="value" placeholder="请选择年份" @change="selectTime">
            <el-option
                v-for="item in years"
              :key="item.value"
              :label="item.lable"
              :value="item.value" >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <!-- 对应弹框FtenderActivityWindow -->
      <div>
        <el-dialog :visible.sync="windowVisible" append-to-body :close-on-click-modal="false">
            <FtenderActivityWindow v-if="windowVisible" ref="popWindow" v-on:closeWindow='closeWindow' v-on:updateWindow="updateWindow"></FtenderActivityWindow>
        </el-dialog>
      </div>
      <el-row>
        <el-col :span="24">
            <el-table :data="tableData.slice((pageNo-1)*page_size,pageNo*page_size)" size="mini" style="width: 100%;" header-cell-class-name="table-header-gray" v-loading="isShowloading" border="1px solid gray" max-height="450">
            <el-table-column type="index" align="center" label="序号" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectId" align="center" label="项目编号"  width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectName" align="center" label="项目名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="customName" align="center" label="业主名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="contractAmount" align="center" label="合同金额（元）" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="tenderType" align="center" label="招标类型"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectArea" align="center" label="项目区域"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="tenderAmount" align="center" label="投标家数"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="tenderFee" align="center" label="标书费（元）"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="agencyFee" align="center" label="代理费（元）"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="income" align="center" label="收入-评标费（元）"  width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pay" align="center" label="支出-评标费（元）"  width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="settlementTime" align="center" label="结算时间"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="receivables" align="center" label="应收款（元）"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="paymentReceived" align="center" label="已回款（元）"  width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="100">
                <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 10px;">
            <el-pagination background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-size="page_size"
                :page-sizes="[10, 20, 30]"
                layout="total, prev, pager, next, sizes"
                :total="total"></el-pagination>
            </el-row>
        </el-col>
        </el-row>
    </div>
</template>

<script>
import FtenderActivityWindow from '@/components/views/FtenderActivityWindow';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  components: {
    FtenderActivityWindow
  },
  data () {
    return {
      tableWidth: '',
      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      windowVisible: false,
      addOperate: undefined,
      tableData: [],
      years: [],
      value: '',
      total: 0,
      page_size: 10,
      pageNo: 1,
      isShowloading: false,
      year: ''
    };
  },
  watch: {
    'screenWidth': function (val) { // 监听屏幕宽度变化
      this.tableWidth = (Number(val) - 620) + 'px';
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  mounted: function () {
    this.tableWidth = this.screenWidth - 620 + 'px'
    var _this = this;
    window.onresize = function () { // 定义窗口大小变更通知事件
      _this.screenWidth = document.documentElement.clientWidth; // 窗口宽度
    };
    this.loadYears();
    this.loadTableData();
  },
  methods: {
    loadYears () {
      let currentYear = new Date().getFullYear();
      this.value = currentYear;
      this.year = currentYear;
      this.years = [];
      this.years.push({value: '全部', lable: '全部'});
      for (let i = 0; i < 11; i++) {
        this.years.push({value: (currentYear - i), label: (currentYear - i) + '年'});
      }
    },
    // 年份选择
    selectTime (data) {
      this.year = data;
      this.loadTableData();
    },
    /**
     * 获取表格数据
     */
    loadTableData () {
      let params = {
        size: this.page_size,
        current: this.pageNo,
        year: this.year
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.listFinanceTender(this, params).then(res => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadTableData()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    // 编辑
    handleEdit (index, row) {
      this.windowVisible = true;
      this.addOperate = false;
      this.$nextTick(() => {
        let copy = Object.assign({}, row);// row是所编辑本行内数据对象
        this.thisEditRow = copy;
        this.$refs.popWindow.dataInit(copy);
        // this.$refs.popWindow.dataInit(row);
      });
    },
    closeWindow () {
      this.windowVisible = false;
    },
    updateWindow () {
      this.windowVisible = false;
      this.loadTableData()
    }
  }
};
</script>
